import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { colors, spacing, typography, borderRadius } from '../styles/variables';

const CardContainer = styled(motion.div)`
  background: ${colors.background};
  border-radius: ${borderRadius.lg};
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
`;

const CardHeader = styled.div`
  background: ${colors.gradientGold};
  color: ${colors.background};
  padding: ${spacing.lg};
  text-align: center;
`;

const CardTitle = styled.h3`
  font-size: ${typography.fontSize.xl};
  font-weight: ${typography.fontWeight.bold};
  margin: 0;
`;

const CardDate = styled.p`
  font-size: ${typography.fontSize.sm};
  opacity: 0.9;
  margin: ${spacing.xs} 0 0;
`;

const CardBody = styled.div`
  padding: ${spacing.lg};
`;

const FortuneCategory = styled.div`
  margin-bottom: ${spacing.lg};
`;

const CategoryTitle = styled.h4`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.lg};
  margin-bottom: ${spacing.sm};
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
`;

const ProgressBar = styled.div`
  height: 10px;
  background: ${colors.backgroundSecondary};
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: ${spacing.sm};
`;

const ProgressFill = styled.div`
  height: 100%;
  background: ${props => {
    switch(props.type) {
      case 'career': return colors.primary;
      case 'love': return colors.accent;
      case 'health': return colors.success;
      default: return colors.primary;
    }
  }};
  width: ${props => props.percentage}%;
  border-radius: 5px;
  transition: width 0.5s ease;
`;

const CategoryDescription = styled.p`
  color: ${colors.textSecondary};
  font-size: ${typography.fontSize.sm};
  margin: 0;
`;

const CardFooter = styled.div`
  display: flex;
  justify-content: space-between;
  padding: ${spacing.md} ${spacing.lg};
  background: ${colors.backgroundSecondary};
  border-top: 1px solid ${colors.border};
`;

const ShareButton = styled.button`
  background: ${colors.primary};
  color: ${colors.background};
  border: none;
  padding: ${spacing.sm} ${spacing.md};
  border-radius: ${borderRadius.md};
  cursor: pointer;
  font-weight: ${typography.fontWeight.medium};
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
  transition: background 0.2s;

  &:hover {
    background: ${colors.primaryDark};
  }
`;

const SaveButton = styled.button`
  background: transparent;
  color: ${colors.textSecondary};
  border: 1px solid ${colors.border};
  padding: ${spacing.sm} ${spacing.md};
  border-radius: ${borderRadius.md};
  cursor: pointer;
  font-weight: ${typography.fontWeight.medium};
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
  transition: all 0.2s;

  &:hover {
    background: ${colors.backgroundSecondary};
    color: ${colors.textPrimary};
  }
`;

const Watermark = styled.div`
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: ${typography.fontSize.xs};
  color: rgba(0, 0, 0, 0.1);
  font-weight: ${typography.fontWeight.bold};
`;

function ShareableFortuneCard({ 
  title = "今日运势", 
  date = "2023年5月15日",
  categories = [
    { 
      name: "事业运", 
      icon: "💼", 
      percentage: 80, 
      description: "工作上有新的机会出现，积极主动能获得认可",
      type: "career"
    },
    { 
      name: "感情运", 
      icon: "❤️", 
      percentage: 65, 
      description: "与伴侣关系融洽，适合安排浪漫约会",
      type: "love"
    },
    { 
      name: "健康运", 
      icon: "💪", 
      percentage: 90, 
      description: "身体状态良好，适合运动锻炼",
      type: "health"
    }
  ]
}) {
  const handleShare = () => {
    // 这里可以集成实际的分享功能
    console.log("分享运势卡片");
  };

  const handleSave = () => {
    // 这里可以集成保存到相册的功能
    console.log("保存运势卡片");
  };

  return (
    <CardContainer
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDate>{date}</CardDate>
      </CardHeader>
      
      <CardBody>
        {categories.map((category, index) => (
          <FortuneCategory key={index}>
            <CategoryTitle>
              <span>{category.icon}</span>
              <span>{category.name}</span>
            </CategoryTitle>
            <ProgressBar>
              <ProgressFill 
                percentage={category.percentage} 
                type={category.type}
                initial={{ width: 0 }}
                animate={{ width: `${category.percentage}%` }}
                transition={{ duration: 0.8, delay: index * 0.2 }}
              />
            </ProgressBar>
            <CategoryDescription>{category.description}</CategoryDescription>
          </FortuneCategory>
        ))}
      </CardBody>
      
      <CardFooter>
        <ShareButton onClick={handleShare}>
          <span>📤</span>
          <span>分享</span>
        </ShareButton>
        <SaveButton onClick={handleSave}>
          <span>💾</span>
          <span>保存</span>
        </SaveButton>
      </CardFooter>
      
      <Watermark>灵犀指引</Watermark>
    </CardContainer>
  );
}

export default ShareableFortuneCard;